<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<style type="text/css">
	input.error{
		border:1px solid #E6594E;
	}
</style>
</head>
<body>
	<div class="container">
		<form id="addUserForm">
			<br/>
			<div class="form-group">
				<label for="loginName">用户名称</label>
				<input type="text" id="loginName" class="form-control" name="loginName" placeholder="输入名称"/>
			</div>
			<div class="form-group">
				<label for="loginPassword">用户密码</label>
				<input type="password" id="loginPassword" class="form-control" name="loginPassword" placeholder="输入密码"/>
			</div>
			<div class="form-group">
				<label for="truthName">真实名称</label>
				<input type="text" id="truthName" class="form-control" name="truthName" placeholder="输入真名"/>
			</div>
			<div class="form-group">
				<label for="phone">用户电话</label>
				<input type="text" id="phone" class="form-control" name="phone" placeholder="输入电话">
			</div>
			<div class="form-group">
				<button type="button" id="saveBtn" class="btn btn-success">提交</button>
				<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
			</div>
		</form>
	</div>
	<script type="text/javascript">
		var addUser=function(){
			if(!check().form){
				return;
			}
			$.ajax({
				type:"GET",
				dataType:"json",
				url:"/user/add",
				data:{
					"loginName":$("#loginName").val(),
					"loginPassword":$("#loginPassword").val(),
					"truthName":$("#truthName").val(),
					"phone":$("phone").val(),
				},
				success:function(msg){
					$("#cancelBtn").click();//请求成功并返回信息
				}
			});
		}
		$("#saveBtn").on('click',function(){
			alert("jfkldskfjdlskfjdsl");
			addUser();
		})
		$("#cancelBtn").on('click',function(){
			var index=parent.layer.getFrameIndex(window.name);
			parent.getUserPageList();
			parent.layer.close(index);
		})
		function check(){
			return $("#addUserForm").validate({
				rules:{
					loginName:{
						required:true
					},
					loginPassword:{
						required:false
					},
					truthName:{
						required:false
					},
					phone:{
						required:true
					}
				},
				messages:{
					loginName:{
						required:""
					},
					loginPassword:{
						required:""
					},
					truthName:{
						required:""
					},
					phone:{
						required:""
					}
				}
			});
		}
	</script>
</body>
</html>